/*
  网站主题颜色：
 */

// ~字体颜色
$font-bg-color: #e2f6f1;
$font-title-color: #222;
$font-text-color: #555;
$font-assist-color: #888;
$font-link-color: #00b38a;
// $font-link-color: #108ee9;
$font-invalid-color: #aaa;

// 加重颜色
$weight-color: #ff9900;

// 排名上升下降
$font-rank-down-color: #00b38a;
$font-rank-up-color: #ff5759;
$font-rank-right-color: #bababa;

// ~边框
$border-color: #d6d6d6;

// 鼠标移入背景
$hover-bg: #dedede;

// 弹窗
$popup-correct: #33ba95; //jiuxu
$popup-warning: #ff9900; //gantanhao2
$popup-error: #ed3f14; //guanbi2

// 其他
$bar-color: #00b38a;

// 页面最大宽度
$page-max-width: 1500px;
// 页面最小宽度
$page-min-width: 1270px;

[v-cloak] { display: none }

li {
    list-style: none;
}

// 省略号
@mixin dot($width: 100px) {
    width: $width;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

// 清除浮动
@mixin clearfix {
  display: block;
  zoom: 1;
  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}
@mixin super-icon{
    width: 80px;
    height: 80px;
    border: 1px solid #eee;
    border-radius: 12px;
}

@mixin big-icon{
    width: 70px;
    height: 70px;
    border: 1px solid #eee;
    border-radius: 12px;
}
@mixin medium-icon{
    width: 62px;
    height: 62px;
    border: 1px solid #eee;
    border-radius: 12px;
}

@mixin small-icon{
    width: 46px;
    height: 46px;
    border: 1px solid #eee;
    border-radius: 10px;
}

@mixin flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
@mixin flex-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
@mixin flex-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
@mixin flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
// 水平居中
@mixin flex-hor-center {
    display: flex;
    justify-content: center;
}
// 垂直居中
@mixin flex-ver-center {
    display: flex;
    align-items: center;
}

// APP详情 内容部分 的每一块
@mixin app-info-block($h:1px){
    width: 100%;
    min-height: $h;
    padding-top: 16px;
    background: #fff;
    padding: 20px 24px 24px 34px;
}

// 边框
@mixin border($width:1px,$style:solid,$color:$border-color){
    border-width: $width;
    border-style: $style;
    border-color: $color;
}

//隐藏滚动条
/*
 * 使用方法
 * 隐藏:
 *      document.querySelector('html').setAttribute('class', 'scroll-bar-hide')
 *      document.querySelector('body').setAttribute('class', 'scroll-bar-hide')
 * 显示:
 *      document.querySelector('html').removeAttribute('class', 'scroll-bar-hide')
 *      document.querySelector('body').removeAttribute('class', 'scroll-bar-hide')
*/
.scroll-bar-hide{
    height: 100%;
    overflow: hidden;
}

// 页面框架
.jumbotron {
    position: relative;
    // min-width: 1300px;
    min-width: $page-min-width;
    margin: 0 auto;
    .full-title{
        width: 100%;
        height: 130px;
        font-size: 26px;
        color: #fff;
        background-color: $font-text-color;
        text-align: center;
        line-height: 130px;
        font-weight: 800;
        border-bottom: 1px solid $border-color;
        .time{
            font-size: 20px;
        }
    }
    > div {
        .container {
            position: relative;
            // min-width: 1300px;
            // 适配东哥笔记本
            min-width: $page-min-width;
            max-width: $page-max-width;
            // padding-left: 16px;
            // padding-right: 16px;
            padding-left: 50px;
            padding-right: 50px;
            // padding-bottom: 40px;
            margin: 0 auto;
        }
    }
    .page-title{
        padding-top: 20px;
        padding-bottom: 6px;
        width: 100%;
        font-size: 20px;
        color: $font-title-color;
        text-align: left;
        font-weight: 800;
        border-bottom: 1px solid $border-color;
        .text-item{
            padding-bottom: 7px;
            border-bottom: 3px solid $font-link-color;
        }
        .title-right-item{
            float:right;
            >a{
                i{
                    margin-left: 5px;
                    color: $font-assist-color;
                }
            }
        }
    }
}


$lineHeight: 25px;
.filter-container {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
    margin-top: 20px;
    margin-bottom: 20px;
    // 图标内间距
    &.table-inner{
        padding-left: 30px;
    }

    .other-country {
        .country-list-drop {
            height: 500px;
            overflow: auto;
            padding: 15px 16px;
            margin-top: 7px;
            border-radius: 5px;
            min-width: 100px;
            li {
                &.area {
                    position: relative;
                    padding: 6px 0;

                    &:before {
                        display: block;
                        content: '';
                        background-color: #eee;
                        position: absolute;
                        top: 0;
                        width: 100%;
                        height: 1px;
                    }

                    span {
                        margin-left: 0;
                        font-size: 14px;
                    }
                }
                >i {
                    position: relative;
                    top: 1px;
                }
                span {
                    margin-left: 6px;
                }
                i.icon {
                    vertical-align: -4px;
                }
            }
        }
    }

    .filter-list {
        position: relative;
        display: flex;
        .filter-col {
            position: relative;
            display: flex;
            align-items: flex-start;
            flex-shrink: 0;
            // 处理一行撑不下的
            &.more-col{
                flex-shrink: initial;
            }
            // 处理导出数据
            &.export-data-col{
                position: absolute;
                right: 0;
                top: -2px;
            }
            // 字数区别，默认2个字
            .filter-type {
                margin-right: 20px;
                height: $lineHeight;
                line-height: $lineHeight;
                font-size: 12px;
                color: $font-title-color;
                font-weight: 600;
                flex-shrink: 0;
                &.three-word{
                    width: 40px;
                }
                &.four-word{
                    width: 50px;
                }
            }
            .filter-content {
                min-height: $lineHeight;

                // overflow: hidden;

                .item-list {
                    @include clearfix;
                    display: flex;
                    height: initial;
                    align-items: flex-start;
                    flex-wrap: wrap;
                    overflow: hidden;
                    // 处理li过多情况，如子分类
                    &.more-item-list{
                        li{
                            margin-bottom: 10px;
                        }
                    }
                    li {
                        flex-shrink: 0;
                        margin-right: 10px;
                        text-align: left;
                        &:last-child{
                            margin-right: 30px;
                        }
                        &.date-picker-li{
                            width: 140px;
                        }
                        a {
                            display: block;
                            font-size: 13px;
                            color: $font-text-color;
                            background: #fff;
                            text-align: center;
                            padding-left: 10px;
                            padding-right: 10px;
                            line-height: $lineHeight;
                            border: 1px solid $border-color;
                            border-radius: 4px;
                            .ivu-icon{
                                color: $font-text-color !important;
                            }
                            &:hover{
                                background-color: #f8f8f8;
                            }
                            &.active{
                                // border: 1px solid $font-bg-color;
                                // background: $font-bg-color;
                                // color: $bar-color;
                                border: 1px solid $font-link-color;
                                background: $font-link-color;
                                color: #fff;
                                .ivu-icon{
                                    color: #fff !important;
                                }
                                &:hover{
                                    background-color: #33c2a1;
                                }
                            }
                            &.other-country{
                                display: inline-block;
                                padding: 0;
                                padding-left: 8px;
                                padding-right: 8px;
                            }
                        }

                        .ivu-input-group-small {
                            top: 3px;
                            .ivu-input {
                                border-top-right-radius: 0;
                                border-bottom-right-radius: 0;
                            }
                        }
                    }
                }
                /* .item-list.open {
                    height: initial;
                } */
            }
            .filter-input {
                position: relative;
                width: 56px;
                height: 27px;
                line-height: 27px;
            }
            .filter-input + .filter-input {
                margin-left: 30px;
            }
            .filter-input + .filter-input:after {
                content: '-';
                position: absolute;
                left: -17px;
                top: 0;
                height: $lineHeight;
                line-height: $lineHeight;
                color: #dddddd;
            }
            .filter-handle {
                width: 90px;
                flex-shrink: 0;
                background: #ccc;
                height: $lineHeight;
                line-height: $lineHeight;
            }
            // 导出数据
            .export-data{
                padding: 3.5px 10px;
                font-size: 13px;
                i.iconfont{
                    font-size: 14px;
                    margin-right: 4px;
                    vertical-align: -1px;
                }
            }
            &:last-child .filter-content .item-list{
                li:last-child{
                    margin-right: 0 !important;
                }
            }
        }
        &:not(:first-child){
            .filter-col{
                padding-top: 15px;
            }
        }

    }
}

// 全局弹框垂直居中
.ivu-modal-wrap {
    display: flex;
    align-items: center;
    justify-content: center;

    .ivu-modal {
        top: -30px;
    }
}

// itc弹窗
.itc-popup-box{
    @include flex-hor-center;
    position: relative;
    width: 100%;
    height: 760px;

    .itc-popup{
        position: absolute;
        top: 100px;
        width: 482px;
        border-radius: 6px;
        background: #fff;
        border: 1px solid $border-color;
        .title{
            // height: 37px;
            // line-height: 37px;
            // font-size: 16px;
            // color: $font-link-color;
            // padding-left: 25px;
            // padding-right: 21px;

            // 和iview样式保持一致
            padding: 14px 16px;
            font-size: 14px;
            color: $font-link-color;
            font-weight: bold;
        }
        .content{
            @include clearfix;
            height: 113px;
            border-top: 1px solid $border-color;
            border-bottom: 1px solid $border-color;
            padding: 25px 31px 20px 25px;
            >img{
            float: left;
            }
            >p{
                float: left;
                width: 336px;
                margin-left: 20px;
                font-size: 14px;
                color: $font-invalid-color;
            }
        }
        .footer{
            padding: 10px 25px;
        }
    }
}


// 填写信息弹窗(上文字加下输入框的样式)
.info-popup{
    @include clearfix;
    .info{
        margin-top: 10px;
        font-size: 13px;
        color: $font-assist-color;
    }
    .input-wrap{
        .input-info{
            font-size: 14px;
            color: $font-text-color;
            margin: 19px 0 7px 0;
        }
    }
    .agree-wrap{
        margin-top: 19px;
    }
    .info-footer{
        border-top: 1px solid #e3e8ee;
        padding: 12px 18px 12px 18px;
        text-align: right;
    }
}

// feedback
.feedback-popup {
    @include clearfix;
    textarea {
        resize: none;
        border: none;
        &:focus {
            border: none;
            outline: 0;
            box-shadow: none;
        }
    }
}

// echart-popup
.echart-popup {
    @include clearfix;
    position: relative;

    .filter-container {
        .filter-list {
            justify-content: flex-end;

            .filter-col {
                padding: 0;
            }
        }
    }
    .echarts {
        height: 350px;
    }
}
// 隐藏底部
.modal-no-footer {
    .ivu-modal-footer {
        display: none;
    }
}
// 登录弹窗
.subscribe-popup {
    @include clearfix;
    position: relative;
    text-align: center;

    .subscribe-box {
        position: relative;
        width: 488px;
        padding: 10px;
        font-size: 14px;

        p {
            margin-top: 4px;

            span {
                color: #ff9900;
            }
        }

        .qrcode {
            position: relative;
            width: 128px;
            height: 128px;
            margin: 25px auto;
            padding: 6px;
            border: 1px solid #eee;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }
}
// qrcode-popup
.qrcode-popup {
    @include clearfix;
    position: relative;
    text-align: center;

    .qrcode-box {
        position: relative;
        width: 488px;
        height: 258px;
        margin: 0 auto;

        > p {
            font-size: 14px;
            margin-top: 5px;
        }
        .qrcode {
            position: relative;
            width: 240px;
            height: 240px;
            margin: 0 auto;

            &:after {
                content: '';
                display: block;
                position: absolute;
                width: 54px;
                height: 54px;
                background-color: #fff;
                top: 93px;
                left: 93px;
                border-radius: 5px;
                padding: 5px;
                background-image: url(https://cdn.qimai.cn/qimai/201801/dbecfb8d607a67bb8829ee90c2383623.png);
                // background-image: url(../images/common/icon-flag.png);
                background-size: 100% auto;
                background-repeat: no-repeat;
            }

            img {
                width: 100%;
                height: 100%;
            }
        }
    }
}
.notice-popup {
    @include clearfix;

    font-size: 14px;
    text-align: center;

    .notice-bind-wechat {
        button {
            display: block;
            margin: 0 auto;
            width: 104px;
            margin-top: 40px;
        }
        button + button {
            margin-top: 15px;
        }
    }
}

// 文本式弹窗
.addcustom-popup {
    @include clearfix;
    position: relative;

    textarea {
        resize: none;
        border: none;
        &:focus {
            border: none;
            outline: 0;
            box-shadow: none;
        }
    }
    .keywords-tips {
        position: absolute;
        right: 10px;
        bottom: 5px;

        i {
            font-style: normal;
            padding: 0 3px;
            color: $font-link-color;
        }
    }
}

.visibility-hidden{
    visibility:hidden;
}

#app-container {
    .no-data {
        text-align: center;
        padding-top: 100px;
        padding-bottom: 100px;
        font-size: 14px;
    }

    .router-loading {
        position: absolute;
        width: 100%;
        height: 100%;
        background: #fff;
        z-index: 100;

        .ivu-spin-fix {
            display: block;

            .ivu-spin-main {
                top: 150px;
            }
        }
    }

}

// 上升下降
.row-rank-item{
    @include clearfix;
    .rank-text{
        width: 45%;
        float: left;
        font-size: 14px;
        text-align: right;
    }
    .item{
        width: 50%;
        float: left;
        text-align: left;
        margin-top: 1px;
    }
    .genre {
        color: $font-assist-color;
        font-size: 12px;
        text-align: center;
        clear: both;
    }
    &.simple{
        .item{
            width: 100%;
            text-align: center;
        }
    }
    .down-item{
        .ivu-icon,.change-text{
            color: $font-rank-down-color;
        }
    }
    .up-item{
        .ivu-icon,.change-text{
            color: $font-rank-up-color;
        }
    }
    .right-item{
        .ivu-icon,.change-text{
            color: $font-rank-right-color;
        }
    }
    .rank-arrow{
        margin-right: 2px;
        margin-left: 10px;
    }
    .rank-text-double{
        width: 100%;
        font-size: 13px;
        .item{
            right: -45px;
            top: 0px;
            position: absolute;
            width: 50px;
        }
        .rank-ranking{
            margin: 0 auto;
            position: relative;
            display: inline-block;
        }
    }
    .rank-txt{
        color: $weight-color;
        font-weight: 500;
        font-size: 12px;
    }
}

// 需要展开的分类
// .filter-container {
//     .genre.filter-list:after{
//         border-bottom:0;
//     }
//     .no-border:after{
//         border-bottom:0;
//     }
// }


.circular-loading {
    width: 30px;
    height: 30px;
    position: relative;
    margin: 0 auto;

    .circular {
        animation: rotate 2s linear infinite;
        transform-origin: center center;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
    .path {
        stroke-dasharray: 1,200;
        stroke-dashoffset: 0;
        animation: dash 1.5s ease-in-out infinite,color 6s ease-in-out infinite;
        stroke-linecap: round;
    }
    @keyframes rotate {
        to {
            -webkit-transform: rotate(1turn);
            transform: rotate(1turn);
        }
    }
    @keyframes dash {
        0% {
            stroke-dasharray: 1,200;
            stroke-dashoffset: 0;
        }

        50% {
            stroke-dasharray: 89,200;
            stroke-dashoffset: -35;
        }

        to {
            stroke-dasharray: 89,200;
            stroke-dashoffset: -124;
        }
    }
    @keyframes color {
        0%,to {
            stroke: #d62d20;
        }

        40% {
            stroke: #0057e7;
        }

        66% {
            stroke: #008744;
        }

        80%,90% {
            stroke: #ffa700;
        }
    }
}
// 页面友情提示块
.web-alert-wrap {
    text-align: center;
    padding-top: 100px;
    padding-bottom: 100px;
    font-size: 14px;
}
.relative{
    position: relative;
}
// 无限加载 S
.loading-more{
    padding-top: 20px;
}
.loading-more-fade-enter-active,
.loading-more-fade-leave-active {
    transition: all 1s;
}
.loading-more-fade-enter,
.loading-more-fade-leave-to{
    opacity: 0;
    transform: translateY(30px);
}
// 无限加载 E

// 顶部面包屑
.breadcrumb-wrap{
    padding-top: 10px;
    padding-bottom: 10px;
    >ul{
        @include clearfix;
        >li{
            float:left;
            margin-right: 10px;
            font-size: 13px;
            color: $font-text-color;
        }
    }
}

/*::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track  外层轨道
::-webkit-scrollbar-track-piece  内层滚动槽
::-webkit-scrollbar-thumb 滚动的滑块
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式*/

::-webkit-scrollbar-track-piece {
    /*background-color:#fff;*/
    -webkit-border-radius: 0;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    height: 10px;
    background-color: rgba(0, 0, 0, .5);
    -webkit-border-radius: 10px;
    /*outline: 1px solid #fff;*/
    outline-offset: -2px;
    border: 1px solid #666666;
}

// ::-webkit-scrollbar-thumb:hover {
//     height: 50px;
//     background-color: #9f9f9f;
//     -webkit-border-radius: 4px;
// }

// table
.data-table{
    width: 100%;
    margin-bottom: 20px;
    font-size: 14px;
    border: 1px solid $border-color;
    tr{
        &:last-child,
        &:nth-last-child(2){
            td{
                border-bottom: none !important;
            }
        }
        th{
            font-size: 12px;
            color: $font-text-color;
            text-align: center;
            border-bottom: 1px solid $border-color;
            padding-top: 10px;
            padding-bottom: 10px;
            background-color: #f7f7fa;
            // 处理排名
            &.rank{
                text-align: left;
                text-indent: 15px;
            }
            &.rank-total{
                text-align: left;
                text-indent: 17px;
            }
        }
        td{
            border-bottom: 1px solid $border-color;
            text-align: center;
            &.no-data{
                font-size: 14px;
                padding-top: 10px !important;
                padding-bottom: 10px !important;
                color: $font-text-color;
            }
            // 序列号
            .index{
                // padding-left: 18px;
                // padding-right: 18px;
                padding: 10px 18px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: normal;
                word-break: break-all;
                box-sizing: border-box;
                font-size: 14px;
                color: $font-text-color;
            }
            // APP应用信息
            .app-info-wrap{
                @include clearfix;
                position: relative;
                padding-top: 10px;
                padding-bottom: 10px;
                .rank-day{
                    position: absolute;
                    top: 7px;
                    right: 40px;
                    font-size: 13px;
                    line-height: 22px;
                    padding-left: 10px;
                    padding-right: 10px;
                    background: $weight-color;
                    border-radius: 11px;
                    color: #fff;
                    transform: scale(.8);
                    -webkit-transform: scale(.8);
                }
                .icon{
                    display: block;
                    float: left;
                    font-size: 0;
                    >img{
                        @include small-icon;
                    }
                }
                .app-info{
                    float: left;
                    margin-left: 10px;
                    .name{
                        @include dot(122px);
                        display: block;
                        text-align: left;
                        font-size: 14px;
                        color: $font-title-color;
                        margin-top: 2px;
                        &:hover{
                            color: $font-link-color;
                        }
                    }
                    .company{
                        @include dot(210px);
                        text-align: left;
                        font-size: 12px;
                        color: $font-text-color;
                        margin-top: 4px;
                    }
                    .drop{
                        float: left;
                        margin-top: 4px;
                        margin-right: 3px;
                        .box{
                            display: block;
                            font-size: 12px;
                            color: $font-text-color;
                            border: 1px solid $border-color;
                            border-radius: 4px;
                            background: #fff;
                            text-align: center;
                            padding-left: 6px;
                            padding-right: 6px;
                            line-height: 18px;
                            &.disabled{
                                background: #f7f7f7;
                                cursor: not-allowed;
                            }
                        }
                    }
                }
            }
            // 排名
            .rank-wrap{
                @include clearfix;
                width: 112px;
                // height: 37px;
                &.rank-total-wrap{
                    width: 100px;
                }
                .rank-box{
                    float: left;
                    width: 64px;
                }
                .num{
                    font-size: 14px;
                    color: $font-text-color;
                    text-align: right;
                    // margin-top: 9px;
                    text-align: center;
                    &.no-change{
                        width: 100%;
                        text-align: center;
                    }
                    // 总榜
                    &.total-num{
                        float: left;
                        width: 32px;
                        text-align: right;
                        margin-right: 4px;
                        margin-top: 9px;
                    }
                }
                .category{
                    font-size: 12px;
                    color: $font-assist-color;
                    text-align: center;
                }
                .rank{
                    float: left;
                    width: 44px;
                    text-align: left;
                    margin-left: 2px;
                    font-size: 13px;
                    margin-top: 11px;
                    // 单独处理总榜
                    &.rank-total{
                        margin-top: 10px;
                    }
                    &.rank-up{
                        color: $font-rank-up-color;
                    }
                    &.rank-down{
                        color: $font-rank-down-color
                    }
                    &.rank-txt{
                        color: $weight-color;
                        font-weight: 500;
                        font-size: 12px;
                        // font-style: italic;
                    }
                    .icon{
                        font-size: 12px;
                    }
                    >span{
                        margin-left: 2px;
                    }
                }
            }
            // 变动
            .change-wrap{
                .rank-up{
                    color: $font-rank-up-color;
                }
                .rank-down{
                    color: $font-rank-down-color
                }
            }
            // 深绿色
            .dark-green{
                color: #03a28d;
            }
            // icon
            .icon-wrap{
                .icon{
                    font-size: 20px;
                    color: $font-assist-color;
                    &+.icon{
                        margin-left: 7px;
                        padding-right: 5px;
                    }
                }
            }
            // echart
            .chart-box{
                margin:0 auto;
                width:200px;
                height: 60px;
            }
            // 链接
            .link{
                display: block;
                padding: 10px 0;
            }
            // 关键词列表
            .keywords-wrap{
                @include clearfix;
                padding-top: 10px;
                li{
                    float: left;
                    margin-right: 10px;
                    margin-bottom: 10px;
                    .item-wrap{
                        position: relative;
                        // line-height: 26px;
                        font-size: 14px;
                        text-align: center;
                        // padding-left: 7px;
                        // padding-right: 7px;
                        padding: 2px 7px;
                        border: 1px solid $font-link-color;
                        border-radius: 4px;
                        color: $font-link-color;
                        &:hover{
                            a{
                                display: block;
                            }
                        }
                        a{
                            display: none;
                            width: 100%;
                            height: 100%;
                            border-radius: 4px;
                            position: absolute;
                            top: 0;
                            left: 0;
                            background: rgba(255,255,255,.8);
                        }
                    }
                }
            }
            //上下两行样式  应用专辑详情页
            .rank-double-wrap{
                p:first-child{
                    font-size: 14px;
                }
                p:last-child{
                    font-size: 12px;
                    color: $font-assist-color;
                }
            }
        }
    }
}

.cm-explain-bottom{
    position: absolute;
    text-align: right;
    font-size: 12px;
    color: $font-assist-color;
    // padding-top: 20px;
    bottom: 20px;
    right: 50px;
}

// 邮件订阅的icon
.app-control-list{
    @include clearfix;
    margin-left: 10px;
    li{
        float: left;
        width: 60px;
        margin-right: 16px;
        .img-wrap{
            position: relative;
            .del-wrap{
                position: absolute;
                top: -9px;
                right: -2px;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background: #fff;
                text-align: center;
                >a{
                    line-height: 20px;
                    font-size: 14px;
                    color: #ff5759;
                }
            }
            img{
                width: 48px;
                height: 48px;
                border: 1px solid #eee;
                border-radius: 10px;
                display: block;
                margin: 0 auto;
            }
        }
        .name{
            @include dot(60px);
            display: block;
            margin-top: 6px;
            font-size: 12px;
            color: $font-text-color;
            text-align: center;
            &:hover{
                color: $font-link-color;
            }
        }
        .add{
            line-height: 48px;
            font-size: 36px;
            color: $font-link-color;
        }
    }
}
